<template>
  <view>
    <view v-if="collectIsEmpty" class="no-drafts-message">暂无收藏~</view>
    <view v-else>
      <view v-for="(collectVo, index) in collectVoList" :key="index">
        <view class="collect-item" @click="getGroupDetail(collectVo.tuanId)">
          <view class="userInfo">
            <image
              class="user-avatar"
              :src="collectVo.simpleUserVo.avatar"
            ></image>
            <view class="user-name">{{ collectVo.simpleUserVo.userName }}</view>
          </view>

          <view class="group-info">
            <view class="group-title">{{ collectVo.tuanTitle }}</view>
            <view class="group-detail">
              <text>{{ collectVo.tuanDetail }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      collectVoList: [],
      userId: uni.getStorageSync("userId"),
    };
  },

  onShow() {
    this.collectVoList = [];
    this.getCollectList();
  },

  computed: {
    // 将 collectIsEmpty 改为计算属性
    collectIsEmpty() {
      return !this.collectVoList || this.collectVoList.length === 0;
    }
  },

  methods: {
    // 获取组团详情
    getGroupDetail(tuanId) {
      uni.navigateTo({
        url: `/subpkg/group_detail/group_detail?tuanId=${tuanId}`,
      });
    },

    // 获取收藏列表
    getCollectList() {
      uni.$http
        .get(`/collect/getCollectList?userId=${this.userId}`)
        .then((res) => {
          const responseData = res.data;
          console.log("获取收藏列表", responseData);
          if (responseData.code === 200) {
            this.collectVoList = responseData.data;
          } else {
            console.log(responseData.message);
          }
        })
        .catch((err) => {
          console.error("获取收藏列表失败", err);
        });
    },
  },
};
</script>

<style lang="scss">
.no-drafts-message {
  text-align: center;
  color: #8c8c8c;
  margin-top: 200px;
}

.collect-item {
  background-color: #ffffff;
  margin-bottom: 5px;
  padding: 6px 6px;

  .userInfo {
    display: flex;
    height: 39px;

    .user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-right: 6px;
    }
    .user-name {
      max-width: 130px; /* 设置最大宽度 */
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 省略号显示 */
      font-size: 13px;
    }
  }

  .group-info {
    max-width: 80vw; /* 设置最大宽度 */
    .group-title {
      font-weight: bold;
      max-width: 80vw; /* 设置最大宽度 */
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 省略号显示 */
    }
    .group-detail {
      max-width: 80vw; /* 设置最大宽度 */
      white-space: nowrap; /* 防止换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 省略号显示 */
      max-height: 1.2em; /* 限制最大高度为一行 */
    }
  }
}
</style>